/**
 * #info
 *
 * @author Vinsea(liwentao@thunisoft.com)
 * @createTime 2019/02/25
 * @updateTime   2019/02/27
 * @description module component
 */
import config from '../../../config/config.js'

// components
import atyInput from '../../form/input/index.vue'

// prefix
const prefixCls = config.prefix + '-captcha-string'

/**
 * #item
 *
 * @type aty-captcha-string
 * @cn 字符验证
 * @order 2
 * @menu 验证码
 * @stPlugin true
 */
const module = {
  name: prefixCls,
  components: { atyInput },
  data () {
    return {
      captchaSrc: '',
      loadSuccess: true,
      captchaValue: ''
    }
  },
  props: {
    /**
     * #property
     *
     * @name      withInput
     * @cn        是否显示输入框
     * @type      boolean
     * @value     true
     * @bind   must
     * @description   自带输入框，自动验证
     */
    withInput: {
      type: Boolean,
      default: true
    },
    /**
     * #property
     *
     * @name      failText
     * @cn        加载失败的提示文字
     * @type      string
     * @value     加载失败<br>点击重试
     * @description   加载失败的提示文字
     */
    failText: {
      type: String,
      default: '加载失败<br>点击重试'
    },
    /**
     * #property
     *
     * @name    captchaDataUrl
     * @cn      验证码的url
     * @group   url
     * @type    string
     * @value   artery/webSecurity/captcha/string
     * @description GET请求，获取验证码图片
     */
    captchaDataUrl: {
      type: String,
      default: 'artery/webSecurity/captcha/string'
    },
    /**
     * #property
     *
     * @name    verifyUrl
     * @cn      验证结果的url
     * @group   url
     * @type    string
     * @value   artery/webSecurity/captcha/string/validate/
     * @description GET请求，验证结果是否正确，参数是验证值
     */
    verifyUrl: {
      type: String,
      default: 'artery/webSecurity/captcha/string/validate/'
    }

  },
  computed: {
    // 最外层容器class
    wrapperClasses () {
      return [`${prefixCls}-wrapper`,
        {
          [`${prefixCls}-input`]: this.withInput
        }
      ]
    },
    // 图片容器class
    imgWrapperClasses () {
      return `${prefixCls}-img-wrapper`
    },
    // 验证码图片class
    captchaImgClz () {
      return `${prefixCls}-img`
    },
    // 无图片时显示的文字class
    captchaTextClz () {
      return `${prefixCls}-text`
    }
  },
  methods: {
    // 获取验证码图片
    requestCaptcha () {
      const uri = `${this.captchaDataUrl}?time=${new Date().getTime()}`
      Artery.ajax.get(uri).then((result) => {
        this.captchaSrc = 'data:img/jpg;base64,' + result
        this.handleResult(true)
      }).catch(() => {
        this.handleResult(false)
      })
    },

    handleResult (isSuccess) {
      this.loadSuccess = isSuccess
      this.$emit('load-success', isSuccess)
    },

    /**
     * #method
     *
     * @name   validate
     * @param  resultCode {string}
     * @returns {Promise}
     * @body this.$refs.验证码组件的ref名称.validate(验证码的值).then(() => {
     *   // TODO 成功
     * }).catch(() => {
     *   // TODO 失败
     * });
     * @description   远程校验验证码是否正确
     */
    validate (resultCode) {
      return Artery.ajax.get(this.verifyUrl + resultCode)
    },
    /**
     * #event
     *
     * @name click
     * @cn 鼠标点击
     * @body console.log('点击切换验证码了')
     * @description 点击切换验证码时的事件
     */
    handleClick () {
      this.requestCaptcha()
      this.$emit('click')
    },

    handleBlur () {
      if (this.withInput && this.captchaValue) {
        this.validate(this.captchaValue).then(() => {
          /**
           * #event
           *
           * @name on-success
           * @cn  校验成功事件
           * @body
           * @description 验证码校验成功事件
           */
          this.$emit('on-success')
        }).catch(() => {
          /**
           * #event
           *
           * @name on-failure
           * @cn  校验失败事件
           * @body
           * @description 验证码校验失败事件
           */
          this.$emit('on-failure')
          this.captchaValue = ''
          this.requestCaptcha()
        })
      }
    }
  },
  beforeMount () {
    this.requestCaptcha()
  }
}
export default module
